<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<script src="https://cn.vuejs.org/js/vue.js"></script>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" href="../static/layui/css/layui.css">
		<script src="../static/layui/layui.js"></script>
		<!-- 引入axios --> 
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		
		<style type="text/css">
			.goods_picture_box{
				width: 280px;
				height: 400px;
				background-color: aquamarine;
				border-radius: 10px;
				margin-top: 25px;
				float: left;
				margin-left: 20px;
			}
			.goods_picture_box img{
				width: 260px;
				height: 380px;
				margin-left: 10px;
				border-radius: 6px;
				margin-top: 10px;
				cursor: pointer;
			}
			.goods_describe{
				width: 400px;
				height: 150px;
				background-color: aquamarine;
				float: left;
				border-radius: 10px;
				margin-left: 20px;
				margin-top: 25px;
			}
			.goods_describe div{
				margin-left: 15px;
				margin-top: 15px;
				font-weight: bolder;
				font-size: 18px;
				margin-bottom: 40px;
			}
			.goods_price{
				width: 400px;
				height: 50px;
				margin-top: 10px;
				background-color: aquamarine;
				float: left;
				margin-left: 20px;
				border-radius: 8px;
				line-height: 50px;
				color: red;
				font-weight: bolder;
				font-size: 16px;
				
			}
			.temp_box{
				float: left;
				width: 400px;
				height: 100px;
				margin-top: 10px;
				margin-left: 20px;
				border-radius: 8px;
				background-color: aquamarine;
				text-align: center;
				line-height: 100px;
				font-weight: 900;
				font-size: 16px;
				color: white;
				transition: all 0.3s;
				cursor: pointer;
			}
			.temp_box:hover{
				background-color: aquamarine;
				font-size: 20px;
			}
			.goods_buy_box{
				width: 400px;
				height: 70px;
				margin-top: 10px;
				background-color: aquamarine;
				float: left;
				margin-left: 20px;
				border-radius: 8px;
			}
			.want_buy{
				float: left;
				margin-right: 10px;
				
			}
			.buy_now{
				float: left;
			}
			.buy_btn{
				margin-right: 10px;
				margin-left: 20px;
				margin-top: 16px;
			}
		</style>
	</head>
	<body>
		<div id="goods_details">
			<span th:text="${session.user.getUser_id()}" hidden="hidden" id="user_id_span"></span>
			<span hidden="hidden" id="goods_id_span"></span>
			<div class="goods_picture_box">
				<img :src=goods_img_url alt="">
			</div>
			<div>
				<div class="goods_describe">
					<div>
						&nbsp;&nbsp;&nbsp;&nbsp;<span>{{goods_describe}}</span>
					</div>
				</div>
				<div class="goods_price">
					&nbsp;&nbsp;&nbsp;&nbsp;价格:  {{goods_price}}
				</div>
				<div class="temp_box">
				    未知区域
				</div>
				<div class="goods_buy_box">
					<div class="buy_btn">
					    <div>
					        <button type="button" class="layui-btn want_buy" @click="buy_now()">现在买</button>
					    </div>
					    <div>
					        <button type="button" class="layui-btn layui-btn-primary 
					    	                             layui-border-green buy_now" @click="want_buy()">
					    			我想要
					    	</button>
					    </div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var user_id=document.getElementById("user_id_span").innerText;
		function child(goods){
			console.log(goods)
			var app=new Vue({
				el:"#goods_details",
				data:{
					user_id:goods.user_id,
					goods_price:goods.goods_price,
					goods_img_url:goods.goods_picture,
					goods_describe:goods.goods_describe,
					goods_id:goods.goods_id
				},
				methods:{
					want_buy:function () {
						axios.get("/addToShoppingCart?user_id="+user_id+"&goods_id="+this.goods_id).then(function (response) {
							console.log(response);
							if(response.data=true){
								layer.msg("已成功添加至购物清单");
							}else {
								layer.msg("Error!");
							}
						},function (err) {
							console.log(err);
						})
					},
					buy_now:function () {
						axios.get("/goodsOldOrderWeChat?user_id="+this.user_id).then(function (response) {
							console.log(response.data);
							if(response.data!=null){
								layui.use('layer', function(){
									var layer = layui.layer;
									layer.open({
										type:2,
										title:'联系页',
										content:'/userChat',
										area: ['300px', '300px'],
										shade: [0.8, '#393D49'],
										resize:false,
										success:function (layero,index) {
											var iframe = window['layui-layer-iframe' + index];
											iframe.child(response.data)
										}

									})
								});
							}
						},function (err) {
							console.log(err.data);
						});
					}
				}
			})
		}
		
	</script>
</html>